<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer">
    <title>chat</title>

</head>

<style>
    body {
        /* position: fixed; */
        z-index: -10;
        background-image: url("img/bg.png");
        background-size: cover;
        background-repeat: no-repeat;
        width: 99%;
        height: 100%;
    }

    .chatdiv {
        /* position: fixed; */
        z-index: -1;
        background: #ffffff;
        background-image: url("img/bg.png");
        background-size: cover;
        background-repeat: no-repeat;
        width: 620px;
        /* border: #608b82 1px solid; */
    }

    .mstitle,
    .msbox {
        display: flex;
        flex-direction: row;
    }

    .msgbox {
        margin: 2px;
        padding: 2px;
        width: 400px;
        height: 400px;
        border: 1px solid #b0a4e3;
        border-radius: 6px;
        overflow: auto;
        word-break: break-all;
        box-shadow: 1px 1px 1px 1px #a797e8;
    }

    .msgtip {
        margin: 2px;
        padding: 1px;
        width: 210px;
        font-size: 14px;
        height: 400px;
        /* border: 1px solid #1685a9; */
        border: 1px solid #b0a4e3;
        border-radius: 6px;
        /* overflow: auto;
        word-break: break-all; */
        box-shadow: 1px 1px 1px 1px #a797e8;
    }

    .usertip,
    .mtip {
        margin: 1px;
        width: 200px;
        height: 195px;
        border-bottom: 1px solid #b0a4e3;
        overflow: auto;
        word-break: break-all;
    }

    .boxtitle {
        margin: 2px;
        padding: 2px;
        width: 400px;
        height: 20px;
        font-weight: 600;
        font-size: 18px;
        /* color: #3d3b4f; */
        color: #608b82;

    }

    .tiptitle {
        margin: 2px;
        padding: 2px;
        width: 210px;
        height: 20px;
        font-weight: 600;
        font-size: 18px;
        /* color: #3d3b4f; */
        color: #608b82;
    }

    #linkval,
    #nickval,
    #tonick,
    #msgval {
        border: 0;
        border-bottom: 2px solid #b0a4e3;
        padding: 0 2px;
        height: 24px;
    }

    #linkval:focus,
    #nickval:focus,
    #tonick:focus,
    #msgval:focus {
        outline: 0;
    }

    #linkval::placeholder,
    #nickval::placeholder,
    #tonick::placeholder,
    #msgval::placeholder {
        color: #85a29d;
    }

    #connbtn,
    #clsbtn,
    #clspbtn,
    #emojibtn,
    #sendbtn {
        cursor: pointer;
        border: 1px solid #b0a4e3;
        border-radius: 6px;
        height: 24px;
        color: #608b82;
        font-weight: 600;
        outline: none;
        box-shadow: 2px 2px 1px 1px #a797e8;
    }

    #connbtn:hover,
    #clsbtn:hover,
    #clspbtn:hover,
    #emojibtn:hover,
    #sendbtn:hover {
        color: #d5a9d0;
    }

    #connbtn:disabled,
    #sendbtn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .sendbox {
        margin: 4px 1px;
        padding: 1px;
    }

    .sendbox>div>input {
        margin: 2px 6px;
    }

    .sendbox>div>div>input {
        margin: 2px 6px;
    }

    .sendbox>div {
        position: relative;

    }

    #emoji {
        /* position: relative;
        top: -190px;
        left: 26%; */
        z-index: 99;
        /* margin: 4px; */
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /* overflow: auto; */
        width: 260px;
        cursor: pointer;
        background: #edf9f6;
    }

    #emjbox {
        /* position: relative; */
        position: absolute;
        /* top: -196px; */
        top: -166px;
        left: 26%;
        z-index: 10;
        margin: 4px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        overflow: auto;
        width: 260px;
        cursor: pointer;
        background: #edf9f6;
        border: #608b82 1px solid;
        border-radius: 6px;
    }

    #emoji>div {
        width: 26px;
        height: 26px;
    }

    #pernotic {
        position: relative;
        margin: 1px 4px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        color: #608b82;
        border: #608b82 1px solid;
        border-radius: 6px;
        box-shadow: 2px 2px 1px 1px #a797e8;
    }

    #notpt {
        width: 8px;
        height: 8px;
        line-height: 8px;
        font-size: 6px;
        color: #fff;
        text-align: center;
        background-color: #ec3810;
        border-radius: 50%;
        position: absolute;
        right: -8px;
        top: -2px;
    }

    .noticposition {
        position: relative;
    }

    #notshow {
        position: absolute;
        background: #fff;
        opacity: 0.8;
        top: -336px;
        left: 100px;
        padding: 2px;
        width: 300px;
        height: 300px;
        font-size: 12px;
        font-weight: 600;
        z-index: 9;
        border: 1px solid #b0a4e3;
        border-radius: 6px;
        overflow: auto;
        word-break: break-all;
    }
</style>

<body>
    <div class="chatdiv">
        <div class="mstitle">
            <div class="boxtitle">
                聊天信息
            </div>
            <div class="tiptitle">
                提示信息
            </div>
        </div>
        <div class="msbox">
            <div class="msgbox">
            </div>
            <div class="msgtip">
                <div class="usertip">
                </div>
                <div class="mtip"></div>
            </div>

        </div>
        <div class="sendbox">
            <div>
                <input type="text" id="linkval" placeholder="连接地址">
                <input type="button" value="连接" id="connbtn">
                <input type="button" value="清聊天" id="clsbtn">
                <input type="button" value="清私聊" id="clspbtn">
                <span id="pernotic">私聊<span id="notpt" style="display:none"></span></span>
                <div class="noticposition">
                    <div id="notshow" style="display:none"></div>
                </div>
            </div>
            <div>
                <div>
                    <input type="text" id="nickval" placeholder="昵称">
                    <input type="text" id="tonick" placeholder="要私聊的昵称">
                </div>
                <div>
                    <input type="text" id="msgval" placeholder="发送内容">
                    <input type="button" value="表情" id="emojibtn">
                    <input type="button" value="发送" id="sendbtn">
                </div>
                <div id="emjbox" style="display:none">
                    <div id="emoji"></div>
                </div>

            </div>
        </div>
    </div>
</body>
<script>

    let socket = '';
    let onlineu = '';
    let menick = '';
    let sockerr = false;

    function handleStr(str) {
        let starr = str.replace(/[`:_.~!@#$%^&*() \+ =<>?"{}|, \/ ;' \\ [ \] ·~！@#￥%……&*（）—— \+ ={}|《》？：“”【】、；‘’，。、]/g, '');
        return starr;
    }
    // 连接
    const connbtn = document.querySelector('#connbtn');
    connbtn.addEventListener('click', function () {

        let nicktxt = document.querySelector('#nickval').value;
        let linktxt = document.querySelector('#linkval').value;
        let uTip = document.querySelector('.usertip');
        let mTip = document.querySelector('.mtip');
        nicktxt = handleStr(nicktxt)

        mTip.innerHTML = "";
        if (linktxt.trim().length == 0) {
            mTip.innerHTML += "输入连接!<br>";
            return
        }
        if (nicktxt.trim().length == 0) {
            mTip.innerHTML += "输入昵称!<br>";
            return
        }
        if (nicktxt.length > 8) {
            mTip.innerHTML += "昵称太长!(大于8)<br>";
            return
        }
        menick = nicktxt;


        // 创建WebSocket连接
        let weblink = "wss://" + linktxt;
        // let weblink = "ws://" + linktxt;
        // let weblink = "ws://127.0.0.1:8800";

        socket = new WebSocket(weblink);
        socket.onopen = function (e) {
            // 连接成功后，发送一条消息
            console.log(e)
            socket.send(`【${nicktxt}】已连接!`);
            connbtn.setAttribute("disabled", true);
            document.title = `${nicktxt}的聊天`;
            sockerr = false;
        }
        // 接收消息
        socket.onmessage = function (e) {
            // 接收到消息后，显示在页面上
            const messageShow = document.querySelector('.msgbox');
            let uTip = document.querySelector('.usertip');
            let mTip = document.querySelector('.mtip');
            let notics = document.querySelector('#notshow');
            let noticpt = document.querySelector('#notpt');
            // messageElement.textContent = event.data;
            // console.log(e.data)
            let msgdata = e.data;

            if (msgdata.indexOf("[onlineusers:]") != -1) {
                // let messageTip = document.querySelector('.msgtip');       
                onlineu = "<span style='color:#337ded;font-weight: 600;'>" + msgdata.substring(14) + "</span><br>"
                uTip.innerHTML = onlineu;

            } else {

                let n = msgdata.indexOf("：");
                let msgname = msgdata.substring(0, n);

                if (menick == msgname) {
                    if (msgdata.indexOf(">T:>>") != -1 || msgdata.indexOf(">F:>>") != -1) {
                        let n = 0;
                        if (msgdata.indexOf(">T:>>") != -1) {
                            n = msgdata.indexOf(">T:>>")
                            let msdata = msgdata.substring(0, n);
                            notics.innerHTML += "<span style='color:#8ebad7; font-weight: 600;'>" + msdata + "</span><br>";
                        } else {
                            n = msgdata.indexOf(">F:>>")
                            let msdata = msgdata.substring(0, n);
                            notics.innerHTML += "<span style='color:#2688a0; font-weight: 600;'>" + msdata + "</span><br>";
                        }

                        if (msgdata.indexOf(">F:>>") != -1) {
                            let disp = notics.style.display;
                            if (disp == "none") {
                                noticpt.style.display = "block";
                            }

                        }
                    } else {
                        messageShow.innerHTML += "<span style='color:#7f9faf;font-size:14px;font-weight: 600;'>" + msgdata + "</span><br>";
                    }

                } else {
                    if (!msgname) {
                        mTip.innerHTML += "<span style='color:#f9906f;font-size:12px;'>" + msgdata + "</span><br>";
                    } else if (msgdata.indexOf(">T:>>") != -1 || msgdata.indexOf(">F:>>") != -1) {
                        let n = 0;
                        if (msgdata.indexOf(">T:>>") != -1) {
                            n = msgdata.indexOf(">T:>>")
                            let msdata = msgdata.substring(0, n);
                            notics.innerHTML += "<span style='color:#8ebad7; font-weight: 600;'>" + msdata + "</span><br>";
                        } else {
                            n = msgdata.indexOf(">F:>>");
                            let msdata = msgdata.substring(0, n);
                            notics.innerHTML += "<span style='color:#2688a0; font-weight: 600;'>" + msdata + "</span><br>";
                        }

                        if (msgdata.indexOf(">F:>>") != -1) {
                            let disp = notics.style.display;
                            if (disp == "none") {
                                noticpt.style.display = "block";
                            }
                        }
                    } else {
                        messageShow.innerHTML += "<span style='color:#277d93;font-size:14px; font-weight: 600;'>" + msgdata + "</span><br>";
                    }

                }

            }



            messageShow.scrollTop = messageShow.scrollHeight;
            uTip.scrollTop = uTip.scrollHeight;
            mTip.scrollTop = mTip.scrollHeight;

        }
        // 
        socket.onclose = function (e) {
            console.log("close")
            console.log(e)
            let mTip = document.querySelector('.mtip');
            let uTip = document.querySelector('.usertip');
            uTip.innerHTML = "";
            mTip.innerHTML += "连接已关闭!<br>";
            connbtn.removeAttribute("disabled");
            socket.close();
            socket = '';
        }
        // 
        socket.onerror = function (e) {
            console.log("error:")
            console.log(e)
            sockerr = true
            let mTip = document.querySelector('.mtip');
            let uTip = document.querySelector('.usertip');
            uTip.innerHTML = "";
            mTip.innerHTML = "";
            mTip.innerHTML += "连接错误!<br>";
            connbtn.removeAttribute("disabled");
        }

    })

    // 清空聊天框
    let msgcls = document.querySelector('#clsbtn');
    msgcls.addEventListener('click', function () {
        let messageShow = document.querySelector('.msgbox');
        let mTip = document.querySelector('.mtip');
        let conf = confirm("确定要清除吗？");
        if (conf) {
            messageShow.innerHTML = "";
            mTip.innerHTML = "";
        }
    })

    // 清私聊
    let pcls = document.querySelector('#clspbtn');
    pcls.addEventListener('click', function () {
        let notshow = document.querySelector('#notshow');
        let conf = confirm("确定要清除吗？");
        if (conf) {
            notshow.innerHTML = "";
        }
    })

    // 私信
    let noticbtn = document.querySelector('#pernotic');
    noticbtn.addEventListener("click", function () {
        let notics = document.querySelector('#notshow');
        let noticpt = document.querySelector('#notpt');
        let notdis = notics.style.display;
        if (notdis == "block") {
            notics.style.display = "none";
        } else {
            notics.style.display = "block";
        }

        noticpt.style.display = "none";
        notics.scrollTop = notics.scrollHeight;

    })

    // 表情
    const emobtn = document.querySelector('#emojibtn');
    const emarr = ['&#128512', '&#128513', '&#128514', '&#128515', '&#128516', '&#128517', '&#128518', '&#128519', '&#128520',
        '&#128521', '&#128522', '&#128523', '&#128524', '&#128525', '&#128526', '&#128527', '&#128528', '&#128529', '&#128530',
        '&#128531', '&#128532', '&#128533', '&#128534', '&#128535', '&#128536', '&#128537', '&#128538', '&#128539', '&#128540', '&#128541',
        '&#128542', '&#128543', '&#128544', '&#128545', '&#128546', '&#128547', '&#128548', '&#128549', '&#128550', '&#128551', '&#128552',
        '&#128553', '&#128554', '&#128555', '&#128556', '&#128557', '&#128558', '&#128559', '&#128560', '&#128561', '&#128562', '&#128563',
        '&#128564', '&#128565', '&#128566', '&#128567', '&#128577', '&#128578', '&#128579', '&#128580']
    emobtn.addEventListener('click', function () {
        let emojishow = document.querySelector('#emoji');
        let emjbox = document.querySelector('#emjbox');
        let dis = emjbox.style.display;
        emojishow.innerHTML = "";
        if (dis == "none") {
            for (index in emarr) {
                let ediv = document.createElement("div");
                ediv.innerHTML = emarr[index];
                ediv.setAttribute("class", "emj");
                emojishow.appendChild(ediv);
            }
            emjbox.style.display = "block";
            let edivs = document.querySelectorAll(".emj");
            let msginput = document.querySelector('#msgval');
            msginput.focus();
            let emn = msginput.selectionStart;
            let putval = msginput.value;
            for (let j = 0; j < edivs.length; j++) {
                edivs[j].onclick = function () {
                    for (let i = 0; i < edivs.length; i++) {
                        // console.log("emoj:", emarr[i])

                        msginput.value = putval.slice(0, emn) + edivs[j].innerHTML + putval.slice(emn);
                    }
                }
            }

        } else {
            emjbox.style.display = "none";

        }
        emojishow.addEventListener("click", function () {
            emjbox.style.display = "none";

        })

    })

    // 隐藏弹框
    document.addEventListener('click', function (e) {
        let emojishow = document.querySelector('#emoji');
        let emojibtn = document.querySelector('#emojibtn');
        let emjbox = document.querySelector('#emjbox');
        if (e.target !== emojibtn && !emojibtn.contains(e.target)) {
            // 表情隐藏
            emjbox.style.display = "none";;

        }
        let noticbtn = document.querySelector('#pernotic');
        let notics = document.querySelector('#notshow');
        if (e.target !== noticbtn && !noticbtn.contains(e.target) && !notics.contains(e.target)) {
            // 私信隐藏
            notics.style.display = "none";

        }

    })


    // 发送
    const msgsend = document.querySelector('#sendbtn');
    msgsend.addEventListener('click', function () {
        let uTip = document.querySelector('.usertip');
        let mTip = document.querySelector('.mtip');
        let topers = document.querySelector('#tonick');
        let pers = topers.value;
        if (pers.trim().length == 0) {
            pers = "";
        }
        if (!socket) {
            mTip.innerHTML = "未连接!<br>";
            return;
        }
        // console.log(socket.readyState)
        let msgtxt = document.querySelector('#msgval').value;
        let nicktxt = document.querySelector('#nickval').value;
        nicktxt = handleStr(nicktxt)
        if (nicktxt.trim().length == 0) {
            mTip.innerHTML = "输入昵称!<br>";
            return
        }
        if (msgtxt.trim().length == 0) {
            mTip.innerHTML += "输入发送内容!<br>";
            return
        }
        let sendata = `${nicktxt}：${msgtxt}`;
        if (pers) {
            if (pers == nicktxt) {
                mTip.innerHTML += "不能发给自己!<br>";
                return
            }
            sendata = `${nicktxt}：${msgtxt}[to:${pers}]`;
            socket.send(sendata);
            mTip.innerHTML += "私信已发送!<br>";
        } else {
            socket.send(sendata);
            mTip.innerHTML += "消息已发送!<br>";
        }
        mTip.scrollTop = mTip.scrollHeight;

        msgsend.setAttribute("disabled", true);
        setTimeout(function () {
            msgsend.removeAttribute("disabled");
        }, 1000)
    })




</script>

</html>